<template>
  <!-- 字典管理 -->
  <div class="dict-manage">
    <div class="search-container">
      <el-form ref="ruleFormRef" :model="queryParams.entity" label-width="80" inline>
        <el-form-item label="关键字" prop="dictName">
          <el-input v-model="queryParams.entity.dictName" maxlength="60" placeholder="字典名称" clearable
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.entity.status" placeholder="全部" style="width: 100px;" clearable>
            <el-option v-for="(value, key, index) in STATUS_TYPE" :value="key" :label="value" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">
            搜索
          </el-button>
          <el-button icon="Refresh" @click="handleResetQuery">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button type="success" icon="Plus" @click="handleOpenDictDialog({})">
          新增
        </el-button>
      </template>

      <el-table v-loading="loading" :data="tableData" highlight-current-row border>
        <el-table-column v-for="(item, index) in columnData" :key="index" :prop="item.prop" :label="item.label"
          min-width="120" :width="item.width || ''" :fixed="item.fixed || false" show-overflow-tooltip
          :resizable="false">
          <template #default="{ row }">
            <span v-if="['enable'].includes(item.prop)">
              <el-tag :type="[1].includes(row[item.prop]) ? 'primary' : 'warning'">{{ STATUS_TYPE[row[item.prop]]
                }}</el-tag>
            </span>
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
          <template #default="scope">
            <el-button type="primary" icon="Operation" link @click="handleLinkDetail(scope.row)">
              字典数据
            </el-button>
            <el-button type="primary" icon="Edit" link @click="handleOpenDictDialog(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" icon="Delete" link @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>
    <EditDialog :dictParams="dictParams" @close="handleCloseDictDialog"></EditDialog>
  </div>
</template>

<script setup>
defineOptions({ name: 'DictManage' })
import { useRouter } from 'vue-router'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Pagination from '@/components/Pagination.vue'
import EditDialog from './EditDialog.vue'
import { getDictPage, deleteDict } from '@views/dictManage/api/dictManage'
import { STATUS_TYPE } from '@constants/dictionary'

const router = useRouter()
const loading = ref(false)
const queryParams = reactive({ entity: { dictName: '', status: '' }, pageNo: 1, pageSize: 10 })
const total = ref(0)
const columnData = ref([
  {
    label: '字典名称',
    prop: 'classifyName',
    fixed: 'left'
  },
  {
    label: '字典编码',
    prop: 'classifyCode'
  },
  {
    label: '状态',
    prop: 'enable',
    width: 100
  },
  {
    label: '描述',
    prop: 'description'
  },
  {
    label: '创建时间',
    prop: 'createDate',
    width: 180
  }
])
const tableData = ref([])
const ruleFormRef = ref(null)
const dictParams = reactive({ visible: false })

// 获取数据
const handleQuery = async () => {
  loading.value = true
  const res = await getDictPage(queryParams)
  loading.value = false
  if (res?.code === 200) {
    tableData.value = res.data.records || []
    total.value = res.total || 0
  }
}

// 重置表单
const handleResetQuery = () => {
  ruleFormRef.value.resetFields()
  queryParams.pageNo = 1
  handleQuery()
}

// 跳转字典详情
const handleLinkDetail = (row) => {
  router.push({ path: '/setting/dict-detail', query: { classifyCode: row.classifyCode }})
}

// 打开字典弹窗
const handleOpenDictDialog = (row) => {
  dictParams.row = row
  dictParams.visible = true
}

// 关闭字典弹窗
const handleCloseDictDialog = (type) => {
  console.log('关闭')
  dictParams.visible = false
  if (type) handleQuery()
}

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除的数据项', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
    .then(async () => {
      let res = await deleteDict({ id: row.id })
      if (res?.code === 200) {
        ElMessage.success('删除成功')
        handleQuery()
      }
    })
    .catch(() => { })
}

// 初始化
onMounted(() => {
  handleQuery()
})
</script>

<style scoped lang="scss"></style>
